<template>
  <div class="content">
    <el-tabs type="border-card" style="height: 92vh" v-model="activeName">
      <el-tab-pane label="水库信息" name="水库信息">
        <el-form ref="form" :model="form" label-width="8rem">
          <el-form-item label="水库名称">
            <el-input
              v-model="form.monitorName"
              placeholder="请输入水库名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="水库地址">
            <el-input
              v-model="form.address"
              placeholder="请输入水库地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="死水位(m)">
            <el-input
              v-model="form.dieData"
              placeholder="请输入死水位"
              type="text"
              oninput="value=value.replace(/[^\d]/g,'.')"
            ></el-input>
          </el-form-item>
          <el-form-item label="总库容(m³)">
            <el-input
              v-model="form.totalCapacity"
              placeholder="请输入总库容"
              type="text"
              oninput="value=value.replace(/[^\d]/g,'.')"
            ></el-input>
          </el-form-item>
          <el-form-item label="调洪库容(m³)">
            <el-input
              v-model="form.floodCapacity"
              placeholder="请输入调洪库容"
              type="text"
              oninput="value=value.replace(/[^\d]/g,'.')"
            ></el-input>
          </el-form-item>
          <el-form-item label="防洪库容(m³)">
            <el-input
              v-model="form.floodControlStorage"
              placeholder="请输入防洪库容"
              type="text"
              oninput="value=value.replace(/[^\d]/g,'.')"
            ></el-input>
          </el-form-item>
          <br />
          <br />
          <br />
          <el-form-item style="margin-left: 75rem">
            <el-button type="primary" @click="updateSupplementaryInfo()"
              >保存</el-button
            >
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="数据录入" name="数据录入">
        <el-form inline :model="form2">
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              size="mini"
              v-model="form2.startTime"
              :picker-options="startTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择结束时间"
              size="mini"
              v-model="form2.endTime"
              :picker-options="endTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="info" size="mini" @click="search(1)"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="warning"
              size="mini"
              @click="addDialogVisible = true"
              >+录入</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          style="height: 67vh; overflow-y: auto; margin-bottom: 1.2rem"
        >
          <el-table-column
            prop="levelData"
            label="库水位(m)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lowerData"
            label="下游水位(m)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="collectTime"
            label="测量时间"
            align="center"
          ></el-table-column>
          <el-table-column prop="status" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="delArtificialData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :current-page="pageData.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData.count"
            :page-size="pageData.pageSize"
            @current-change="handleCurrentChange"
            v-if="pageData.count && pageData.count != 0"
          >
          </el-pagination>
        </el-row>
        <el-dialog
          title="人工录入数据"
          :visible.sync="addDialogVisible"
          :before-close="closeDialog"
          width="25%"
        >
          <el-form
            :model="addForm"
            ref="addForm"
            label-position="left"
            label-width="5rem"
          >
            <el-form-item label="库水位" prop="levelData">
              <el-input
                placeholder="请输入库水位"
                v-model="addForm.levelData"
              ></el-input>
            </el-form-item>
            <el-form-item label="下游水位" prop="lowerData">
              <el-input
                placeholder="请输入下游水位"
                v-model="addForm.lowerData"
              ></el-input>
            </el-form-item>
            <el-form-item label="测量时间" prop="collectTime">
              <el-date-picker
                v-model="addForm.collectTime"
                type="datetime"
                placeholder="请选择测量时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="closeDialog">取 消</el-button>
              <el-button type="primary" @click="addData">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
    <p class="pStyle">南京中网卫星通信股份有限公司</p>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "Yantu",
  props: {
    node: Object,
  },
  data() {
    return {
      activeName: "水库信息",
      form: {
        dieData: "",
        address: "",
        monitorName: "",
        floodControlStorage: "",
        floodCapacity: "",
        totalCapacity: "",
      },
      addForm: {
        levelData: null,
        lowerData: null,
        collectTime: "",
      },
      addDialogVisible: false,
      form2: {
        startTime: moment().subtract(1, "year").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      tableHead: null,
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      dataType: null,
      monitorId: sessionStorage.getItem("monitorId"),
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form2.startTime
            ? time.getTime() > new Date(this.form2.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form2.endTime
            ? time.getTime() < new Date(this.form2.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    getlist() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.monitorId}\\"}","serviceCode":"getSupplementaryInfo","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.form.dieData = res.data.parameter.dieData;
        this.form.address = res.data.parameter.address;
        this.form.monitorName = res.data.parameter.monitorName;
        this.form.floodControlStorage = res.data.parameter.floodControlStorage;
        this.form.floodCapacity = res.data.parameter.floodCapacity;
        this.form.totalCapacity = res.data.parameter.totalCapacity;
      });
    },
    updateSupplementaryInfo() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"
        {\\"monitorId\\":\\"${this.monitorId}\\",
        \\"dieData\\":\\"${this.form.dieData}\\",
        \\"address\\":\\"${this.form.address}\\",
        \\"monitorName\\":\\"${this.form.monitorName}\\",
        \\"floodControlStorage\\":\\"${this.form.floodControlStorage}\\",
       \\"floodCapacity\\":\\"${this.form.floodCapacity}\\",
       \\"totalCapacity\\":\\"${this.form.totalCapacity}\\"}",
        "serviceCode":"updateSupplementaryInfo","timestamp":"","uuid":""}`,
      }).then((res) => {
        console.log(res);
        if (res.data.resultcode == "0000") {
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 1000,
            offset: 450,
          });
          this.getlist();
        } else {
          this.$message({
            message: "保存失败",
            type: "error",
            duration: 1000,
            offset: 450,
          });
        }
      });
    },
    getData(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${
          this.monitorId
        }\\",\\"startTime\\":\\"${moment(queryData.startTime).format(
          "YYYY-MM-DD HH:mm:ss"
        )}\\",\\"endTime\\":\\"${moment(queryData.endTime).format(
          "YYYY-MM-DD HH:mm:ss"
        )}\\",\\"page\\":{\\"currentPage\\":${
          queryData.currentPage
        },\\"pageSize\\":10}}","serviceCode":"listArtificialDataByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        if (res.data.resultcode == "0000") {
          if (res.data.parameter.page) {
            this.pageData = res.data.parameter.page;
          } else {
            this.pageData = [];
          }
          var list = res.data.parameter.list;
          for (let i = 0; i < list.length; i++) {
            list[i].collectTime = moment(list[i].collectTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          this.tableData = list;
        }
      });
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        startTime: this.form2.startTime,
        endTime: this.form2.endTime,
      };
      this.getData(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    addData() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addForm)) {
            formData.append(key, value);
          }
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"monitorId\\":\\"${Number(
              this.monitorId
            )}\\",\\"levelData\\":\\"${
              this.addForm.levelData
            }\\",\\"lowerData\\":\\"${
              this.addForm.lowerData
            }\\",\\"collectTime\\":\\"${moment(this.addForm.collectTime).format(
              "YYYY-MM-DD HH:mm:ss"
            )}\\"}","serviceCode":"addArtificialData","timestamp":"","uuid":""}`,
          }).then((res) => {
            if (res.data.resultcode == "0000") {
              this.$message({
                type: "success",
                message: "新增成功",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: 1,
                    startTime: this.form2.startTime,
                    endTime: this.form2.endTime,
                  };
                  this.getData(queryData);
                },
              });
            } else {
              this.$message({
                type: "error",
                message: "新增失败",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: 1,
                    startTime: this.form2.startTime,
                    endTime: this.form2.endTime,
                  };
                  this.getData(queryData);
                },
              });
            }
            this.addDialogVisible = false;
          });
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            duration: 1000,
          });
        }
      });
    },
    closeDialog() {
      this.addDialogVisible = false;
    },
    delArtificialData(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除人工录入数据", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${row.id}\\"}","serviceCode":"deleteArtificialData","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            if (res.data.resultcode == "0000") {
              this.$message({
                type: "success",
                message: "成功删除数据",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: 1,
                    startTime: this.form2.startTime,
                    endTime: this.form2.endTime,
                  };
                  this.getData(queryData);
                },
              });
            } else if (res.data.resultcode == "0001") {
              this.$message({
                type: "warning",
                message: message,
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: 1,
                    startTime: this.form2.startTime,
                    endTime: this.form2.endTime,
                  };
                  this.getData(queryData);
                },
              });
            } else {
              this.$message({
                type: "error",
                message: message,
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: 1,
                    startTime: this.form2.startTime,
                    endTime: this.form2.endTime,
                  };
                  this.getData(queryData);
                },
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
    tableRowClassName({ row }) {
      if (row.flag) {
        return "row01";
      } else {
        return "row02";
      }
    },
  },
  created() {
    this.getlist();
    let queryData = {
      currentPage: "1",
      startTime: this.form2.startTime,
      endTime: this.form2.endTime,
    };
    this.getData(queryData);
  },
};
</script>

<style lang="less" scoped>
.pStyle {
  position: absolute;
  bottom: 1%;
  right: 2%;
}
.el-table {
  /deep/ .row01 {
    background: #ffbab7;
  }
  /deep/ .row02 {
    background: #97cbff;
  }
  /deep/ .row03 {
    background: #ffffa3;
  }
}
.el-table::before {
  z-index: inherit;
}
</style>